<template>
  <div class="check-task-container common-check-container">
    <div class="common-list-bread">
      <el-button class="common-btn-solid btn-short" icon="el-icon-arrow-left" @click="jumpToAirportManage">返回</el-button>
      <span>查看试验任务</span>
    </div>
    <div class="check-container common-content-box">
      <div class=""><!-- common-detail-box -->
        <div class="detail-content-box">
          <div class="common-two-box">
            <div class="common-item-box">
              <span class="common-item-label">机场名称：</span>
              <span>
                {{name}}
                <span v-if="coordinate">（{{coordinate}}）</span>
              </span>
            </div>
            <div>
              <span class="common-item-label">机场别名：</span>
              <span>{{alias ? alias : '--'}}</span>
            </div>
          </div>
          <div class="common-two-box">
            <div class="common-item-box">
              <span class="common-item-label">机场属性：</span>
              <span>
                {{airportType || '--'}}
              </span>
            </div>
          </div>
          <div class="common-two-box">
            <div>
              <span class="common-item-label">是否为区内机场：</span>
              <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
            </div>
            <div>
              <span class="common-item-label">机场简称：</span>
              <span>{{briefName ? briefName : '--'}}</span>
            </div>
          </div>
          <div class="common-two-box">
            <div class="common-item-box">
              <span class="common-item-label" style="padding-top: 25px;">跑道信息：</span>
              <div class="check-box-table">
                <el-table :data="runwayInfoList" class="common-check-table">
                  <el-table-column prop="name" label="跑道名称" min-width="120" ></el-table-column>
                  <el-table-column prop="runwayLength" label="跑道长度" min-width="120" ></el-table-column>
                  <el-table-column prop="direction" label="方向" min-width="120" ></el-table-column>
                  <el-table-column prop="width" label="宽度" min-width="120" ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="common-two-box">
            <div>
              <span class="common-item-label">海拔高度：</span>
              <span>{{altitude || '--'}}</span>
            </div>
            <div>
              <span class="common-item-label">PCN值：</span>
              <span>{{pcnValue || '--'}}</span>
            </div>
          </div>
          <div class="resident-model-box">
              <span class="common-item-label">所驻机型：</span>
              <span  class="desc">{{residentModelList.join('、')}}</span>
          </div>
          <div class="common-item-box">
            <span class="common-item-label">驻场单位：</span>
            <span v-if="residentDepartmentList && residentDepartmentList.length">
                <span :key="index" v-for="(item, index) in residentDepartmentList">
                  <span v-if="index !== 0">、</span>{{item}}
                </span>
              </span>
            <span v-else>--</span>
          </div>
          <div>
            <span class="common-item-label">添加时间：</span>
            <span>{{createdTime}}</span>
          </div>
          <div class="common-item-box">
            <span class="common-item-label">机场状态：</span>
            <div>
              <div :class="status === 1 ? 'color-green' : 'color-red'">{{status === 1 ? '开放中' : '已关闭'}}</div>
              <div v-if="status === 2">
                <span class="item-title">关闭至：</span>
                <span>{{closePeriodType === 2 ? '永久关闭' : closedEndDate}}</span>
              </div>
              <div>
                <span class="item-title">报号：</span>
                <span>{{telegramNo ? telegramNo : '--'}}</span>
              </div>
              <div>
                <span class="item-title">{{status === 1 ? '备注' : '关闭原因'}}：</span>
                <span>{{remark ? remark : '--'}}</span>
              </div>
            </div>
          </div>
          <div class="common-two-box">
            <div>
              <span class="common-item-label">其它信息：</span>
              <span>{{otherInfo || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="detail-content-box">
          <p class="box-title">机场操作日志</p>
          <div class="box-table">
            <el-table :data="changeHistoryVOList" class="common-check-table">
              <el-table-column prop="creator" label="操作账号" min-width="150"></el-table-column>
              <el-table-column prop="statusText" label="机场状态变更" min-width="150"></el-table-column>
              <el-table-column prop="telegramNo" label="报号" min-width="150">
                <template slot-scope="scope">
                  {{scope.row.telegramNo ? scope.row.telegramNo : '--'}}
                </template>
              </el-table-column>
              <el-table-column label="关闭原因/备注" min-width="150">
                <template slot-scope="scope">
                  {{scope.row.remark ? scope.row.remark : '--'}}
                </template>
              </el-table-column>
              <el-table-column prop="createdTime" label="操作时间" min-width="150"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="common-footer-box">
          <el-button class="common-btn-primary" @click="jumpToAirportManage">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        queryParams: {},    //列表页查询参数
        loading: false,
        alias: "",
        residentDepartmentList: [],    //驻场单位
        statisticTomorrowPlanFlag: false,    //是否统计次日本场计划
        briefName: '',    //机场简称
        changeHistoryVOList: [],
        closePeriodType: "",
        closedEndDate: "",
        coordinate: "",
        createdTime: "",
        id: "",
        name: "",
        remark: "",
        status: '',
        airportType: '',
        runwayInfoList: [],
        residentModelList: [],
        pcnValue: '', 
        altitude: '',
        otherInfo: '',
        telegramNo: ""
      }
    },
    created() {
      this.queryParams = this.$route.query;
      this.asyncGetAirportInfo(this.queryParams.id);
    },
    methods: {
      //获取机场信息
      asyncGetAirportInfo(id) {
        this.loading = true;
        this.$axios.get("/airport/getAirportInfo?id="+ id).then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            let data = res.data.data;
            console.log('this');
            console.log(this.$attrs);
            Object.keys(data).forEach((item) => {
              if (item !== 'coordinate') {
                this[item] = data[item];
              }
            });
            let _coordinate = JSON.parse(data.coordinate);
            let _lng = _coordinate.lng;
            let _lat = _coordinate.lat;
            this.coordinate = _lat.deg ? `N${_lat.deg}°${_lat.min ? _lat.min : "00"}′${_lat.sec ? _lat.sec : "00"}″ E${_lng.deg}°${_lng.min ? _lng.min : "00"}′${_lng.sec ? _lng.sec : "00"}″` : '';
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //点击返回
      jumpToAirportManage() {
        this.$router.push({
          path: '/airportManage',
          query: this.queryParams
        })
      }
    },
  }
</script>
<style scoped>
  .detail-content-box {
    padding: 50px 20px 10px;
  }
   .detail-content-box:nth-child(2) {
    margin: 0 20px;
    padding: 20px 0;
    border-top: 1px dashed var(--color-gray-secondary);
  }
  .detail-content-box > div {
    margin-bottom: 10px;
  }

  .check-container {
    padding-top: 20px;
    background-color: #fff;
  }
</style>
